<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

<!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>

<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
    <style>
        body{
            padding: 0 10px;
        }
        nav{
            margin-top:10px;
        }
        .col-4{
            width: 200px;
        }
        .list{
            {#flex-wrap: wrap;#}
            {#display: flex;#}
            {#justify-content: space-around;#}
            {#align-content: space-around;#}

            padding: 10px;
        }
        .list a{
            display: inline-block;
            width: 100px;
            padding: 10px;
             margin: 10px;
            text-decoration: none;
        }
        .tab-content{
        }
    </style>
</head>
<body>


<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<div class="row">
  <div class="col-4">
    <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">西安理工大学</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">西安电子科技大学</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">西安交通大学</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">西北农林大学</a>
  </div>
  </div>
  <div class="col-8">
   <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">
        <div class="list">
            {% for i in info %}
                <a href="{{ i.url }}">   {{ i.name}}</a>

            {% endfor %}

        </div>
    </div>
    <div class="tab-pane" id="profile" role="tabpanel">..nknjk.</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
  </div>
  </div>
</div>
</body>
<script>
    const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})
</script>
</html>